<script setup>
import CartCard from '@/components/CartCard.vue'
// import AddressCard from '@/components/AddressCard.vue'

import { useRoute } from 'vue-router'
import { useCartStore, useUserStore, useShopInfoStore, useOrderStore } from '@/stores'
import { computed, ref } from 'vue'
import router from '@/router'

const shopInfo = useShopInfoStore()
const shipId = useRoute().query.shopId
const Cart = useCartStore()
const Order = useOrderStore()
const User = useUserStore()

const userId = 0
const list = Cart.cartList.get(shipId)
const userInfo = User.userList[userId]
const userAddress = userInfo.addressList[userInfo.currentAddress]
const isPay = ref(false)
const buyCart = computed(() => [...list].filter((item) => item[1].checked && item[1].number > 0))
const totalPrice = computed(() => {
  return buyCart.value
    .reduce((all, next) => {
      return (all += next[1].number * next[1].price)
    }, 0)
    .toFixed(2)
})
const shopName = computed(() => shopInfo.nearbyList.find((item) => item.id == shipId).name)

const submitPay = () => {
  const orderInfo = {
    shopId: shipId,
    totalPrice: totalPrice.value,
    totalCount: buyCart.value.reduce((all, next) => {
      return (all += next[1].number)
    }, 0),
    productImgList: buyCart.value.map((item) => item[1].imgName)
  }
  Order.orderList.push(orderInfo)

  //清空购物车里的数据
  Cart.cartList.set(shipId, new Map())

  // 跳转订单页面
  console.log('跳转订单页面')
  router.push('/order')
}

console.log(buyCart.value)
console.log(userInfo.id)
console.log(userAddress)
console.log(shopInfo.nearbyList)
</script>
<template>
  <div class="cart">
    <div class="cart-header">
      <div class="cart-header-top">
        <div class="cart-header-left iconfont" @click="$router.back()">&#xe697;</div>
        <div class="cart-header-right">确认订单</div>
      </div>
      <div class="cart-header-bottom">
        <div class="cart-header-bottom-item1">收货地址</div>
        <div class="cart-header-bottom-item2">
          <div v-if="typeof userInfo.currentAddress === 'number'" class="change1">
            <div class="cart-header-bottom-item2-address">
              <p>{{ userAddress.address_text }}</p>
              <p>{{ userAddress.name + ' ' + userAddress.phone }}</p>
            </div>
            <div
              class="cart-header-bottom-item2-go iconfont"
              @click="$router.push({ path: '/address', query: { id: userInfo.id } })"
            >
              &#xe697;
            </div>
          </div>
          <div v-else class="cart-header-bottom-item2-no">
            <div>暂无收货地址，请添加</div>
            <div
              class="cart-icon2 iconfont"
              @click="$router.push({ path: '/address', query: { id: userInfo.id } })"
            >
              &#xe697;
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cart-body">
      <div class="cart-body-top">{{ shopName }}</div>
      <div v-for="item in buyCart" :key="item.id">
        <CartCard :list="item[1]" />
      </div>
    </div>
    <div class="cart-footer">
      <div>&nbsp;&nbsp;&nbsp;&nbsp; 总实付金额：￥{{ totalPrice }}</div>
      <div
        class="cart-footer-btn"
        v-show="typeof userInfo.currentAddress === 'number'"
        @click="isPay = true"
      >
        提交订单
      </div>
    </div>
    <div class="cart-mask" v-show="isPay">
      <div class="content">
        <div class="content-title">确认要离开收银台？</div>
        <div class="content-content">请尽快完成支付，否则订单将自动取消</div>
        <div class="content-btn">
          <button class="btn1" @click="isPay = false">取消支付</button>
          <button class="btn2" @click="submitPay()">确认支付</button>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang='scss'>
@import '@/style/viriables.scss';
@import '@/style/mixins.scss';

.cart {
  margin: 20px;
  font-size: 20px;
  height: 100vh;
  &-header {
    position: relative;
    &-top {
      display: flex;
      align-items: flex-start;
      color: #fff;
      height: 180px;
      margin-bottom: 80px;
      border-radius: 10px;
      background: linear-gradient(to bottom, $btn-bgColor, #e5e5e5);
      & div {
        text-align: left;
        margin-left: 10px;
        margin-top: 10px;
        width: 40%;
      }
    }
    &-bottom {
      position: absolute;
      width: 90%;
      height: 85%;
      margin: 0 auto;
      border-radius: 10px;
      background-color: $dark-bgColor;
      top: 70%;
      left: 50%;
      transform: translate(-50%, -40%);
      color: #3d3d3d;
      font-size: 20px;
      &-item1 {
        padding: 15px;
      }
      &-item2 {
        padding: 15px;
        &-go {
          width: 10px;
          transform: rotate(180deg);
        }
        &-no {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .cart-icon2 {
            transform: rotate(180deg); //旋转180度
          }
        }

        &-address {
          width: 60%;
          display: inline-block;
          & p {
            width: 100%;
            margin-top: 2px;
            font-size: 15px;
            @include ellipse;
          }
        }
      }
    }
  }
  &-body {
    width: 86%;
    background-color: #fff;
    margin: 0 auto;
    padding: 10px;
    &-top {
      font-size: 18px;
      margin-bottom: 20px;
    }
  }
  &-footer {
    $height: 60px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 20px;
    height: $height;
    line-height: $height;
    background-color: $dark-bgColor;
    display: flex;
    justify-content: space-between;
    align-items: center;
    & .cart-footer-btn {
      width: 100px;
      height: $height;
      line-height: $height;
      text-align: center;
      color: #fff;
      background-color: $btn-bgColor;
    }
  }
  &-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;

    .content {
      width: 80%;
      height: 170px;
      position: fixed;
      padding: 10px;
      box-sizing: border-box;
      border-radius: 10px;
      background-color: #fff;
      color: #000000;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      &-title {
        font-size: 20px;
        font-weight: 800;
        text-align: center;
        margin-top: 10px;
      }
      &-content {
        font-size: 13px;
        color: #b9b9b9;
        text-align: center;
        margin-top: 10px;
        height: 30px;
        line-height: 30px;
      }
      &-btn {
        display: flex;
        justify-content: space-evenly;
        margin-top: 10px;
        & button {
          width: 100px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          border-radius: 20px;
          border: none;
          &:first-child {
            background-color: #fff;
            color: $btn-bgColor;
            cursor: pointer;
            border: 1px solid $btn-bgColor;
          }
          &:last-child {
            background-color: $btn-bgColor;
            color: #fff;
            cursor: pointer;
          }
        }
      }
    }
  }
}
.change1 {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
</style>